VSCode CRA ESlint Prettier Typescript 설정

2021-05-27

CRA로 만들었을 때 Eslint와 Prettier 설정하기

npm i -D eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react prettier 

ESLint 설정파일

// .eslintrc.js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended', 'plugin:prettier/recommended'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react'],
  ignorePatterns: ['.*.js'],
  rules: {
    'react/react-in-jsx-scope': 'off',
    'prettier/prettier': [
      'error',
      {
        usePrettierrc: true,
      },
    ],
  },
};

Prettier 설정 파일

// .prettierrc.js
module.exports = {
    "printWidth": 100, // 화면 폭
    "tabWidth": 2, // 탭간격, 스페이스 설정시 2칸 띄어쓰기
    "singleQuote": true, // ' 사용
    "trailingComma": "all", // , 자동 붙이기
    "bracketSpacing": true, // [1,2] -> [ 1, 2 ]
    "semi": true, // ; 사용
    "useTabs": false, // tab키 사용. false 추천 == space 대체
    "arrowParens": "avoid", // (x) => x를 x => x로 변환
    "endOfLine": "lf"
} 

Git Hook 추가

npm i -D husky@4 lint-staged

npm script에 "lint": "eslint --fix"를 추가한다.

허스키 설정파일 .huskyrc.json

{
    "hooks": {
        "pre-commit": "lint-staged"
    }
}

lint-staged 설정파일 .lintstagedrc.json

{
    "src/**/*.{js,ts,jsx,tsx}": [
        "npm run lint"
    ]
} 

TypeScript 추가 설정

2021-05-05

• 참조
• Typescript Eslint 설정
• Prettier formatter